<template>
  <el-table
    ref="tableIns"
    :data="data"
    v-bind="$attrs"
    :row-key="rowKey"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-for="col in columnList"
      :prop="col.prop"
      :label="col.label"
      v-bind="col"
    >
      <template #default="scope">
        <div v-if="col.renderHtml" v-html="col.renderHtml(scope.row)"></div>

        <slot
          :name="col.slotName"
          v-if="col.slotName"
          :row="scope.row"
          :$index="scope.$index"
        ></slot>

        <Render v-if="col.render" :render="col.render(scope.row)" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup name="TableView">
import useColumns from "./hooks/useColumns";
import Render from "@/components/Render/index.vue";
import useSelection from "./hooks/useSelection";

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
    required: true,
  },
  data: {
    type: Array,
    default: () => [],
    required: true,
  },
  rowKey: {
    type: Function,
    default: (row) => row.id,
  },
  selected: {
    type: Array,
    default: () => [],
  },
  instance: {
    type: Object,
  },
});

const emit = defineEmits(["update:selected", "update:instance"]);

const { columnList } = useColumns(props);

const { tableIns, selectedKeys, handleSelectionChange } = useSelection(
  props,
  emit
);
</script>
